<template>
  <button v-for="(item,i) in clickArray" :key="i" @click="clickChange(item)">{{item.name}}</button>
  <!-- 字谜组件 -->
  <ZimiIndex v-if="changeType === '1'" />
  <!-- 对联新组建 -->
  <Couplet v-else-if="changeType === '2'" />
  <div class="container" v-else>
    <!-- <textarea v-model="allZimi"></textarea>
    <button @click="segment">分割</button>
    <input v-model="zimiText" />
    <button @click="drawVideo">画</button> -->
    <p
      >-------------------------------------------------- 对 联
      --------------------------------------------------</p
    >
    <div>
      <span>是否镜像处理视频：</span>
      <a-select
        :style="{ width: '120px' }"
        placeholder="请选择是否镜像"
        v-model="horizontalType"
      >
        <a-option :value="true">是</a-option>
        <a-option :value="false">否</a-option>
      </a-select>
      <!-- <canvas
        id="canvas"
        width="1080"
        height="1920"
        style="border: 1px solid black"
        ref="canvasTest"
      ></canvas> -->
      <!-- <p style="text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000, 2px 2px #000, -2px -2px #000, 2px -2px #000, -2px 2px #000;font-size:40px;color:#ffde00;">人才</p> -->
      <span>是否真人出镜：</span>
      <a-select
        :style="{ width: '120px' }"
        placeholder="请选择是否真人出镜"
        v-model="peopleType"
      >
        <a-option :value="true">是</a-option>
        <a-option :value="false">否</a-option>
      </a-select>
      <a-button type="success" @click="textChange">交换文案</a-button>
      <p
        >第一组(在处理第{{ handleNum }}个)<a-button @click="handleOneVideo"
          >导出视频</a-button
        ></p
      >
      <input type="file" @change="handleFileChange" accept="video/*" multiple />
      <a-button type="success" @click="oneHandleVideo">开始处理</a-button>
      <a-button type="success" @click="zimiChange">字谜生成</a-button>
      <a-button type="success" @click="getVideoImg" style="margin-left: 10px"
        >获取底图</a-button
      >
      <div style="margin-top: 10px">
        <!-- <a-input
          :style="{ width: '18%' }"
          style="margin-left: 10px"
          :placeholder="`请输入第${index + 1}个视频的文本`"
          v-for="(item, index) in oneVideoText"
          :key="index"
          v-model="item.text"
        /> -->
        <div style="display: flex; justify-content: space-between">
          <div
            style="flex: 1; margin-right: 10px"
            v-for="(item, index) in oneVideoList"
            :key="index"
          >
            <a-input
              v-model="oneVideoText[index].text"
              style="margin-bottom: 10px"
            />
            <video
              :src="item.url"
              type="video/mp4"
              controls
              style="width: 100%; margin-top: 10px"
            />
          </div>
        </div>
      </div>
    </div>
    <div>
      <p>第二组(在处理第{{ handleNumTwo }}个)</p>
      <input
        type="file"
        @change="handleFileChangeTwo"
        accept="video/*"
        multiple
      />
      <a-button type="success" @click="twoHandleVideo">开始处理</a-button>

      <div style="margin-top: 10px">
        <!-- <a-input
          :style="{ width: '18%' }"
          style="margin-left: 10px"
          :placeholder="`请输入第${index + 1}个视频的文本`"
          v-for="(item, index) in TwoVideoText"
          :key="index"
          v-model="item.text"
        /> -->
        <div style="display: flex; justify-content: space-between">
          <div
            style="flex: 1; margin-right: 10px"
            v-for="(item, index) in twoVideoList"
            :key="index"
          >
            <a-input
              v-model="TwoVideoText[index].text"
              style="margin-bottom: 10px"
            />
            <video
              :src="item.url"
              type="video/mp4"
              controls
              style="width: 100%; margin-top: 10px"
            />
          </div>
        </div>
      </div>
    </div>
    <div>
      <div
        v-for="(item, index) in showVideo"
        :key="index"
        style="float: left; margin-left: 10px"
      >
        <video
          :src="item.newUrl"
          type="video/mp4"
          :style="{
            width: item.width / 2 + 'px',
            height: item.height / 2 + 'px',
          }"
          controls
          style="object-fit: fill"
          id="video_one"
        >
        </video>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  MP4Clip,
  Combinator,
  ImgClip,
  OffscreenSprite,
  renderTxt2ImgBitmap,
} from '@webav/av-cliper';
import { AVCanvas } from '@webav/av-canvas';
import { assetsPrefix } from '../../utils/utils.ts';
import { ref } from 'vue';
import ZimiIndex from './zimi/index.vue';
import Couplet from './couplet/index.vue';
// import one from '@/assets/video/one.mp4';
import twoPngIm from '@/assets/video/two.png';
const changeType = ref('1'); // 0 旧对联  1 字谜 2 新对联
const clickArray = ref([
  { name: '旧对联', value: '0' },
  { name: '字谜', value: '1' },
  { name: '新对联', value: '2' },
]);
const clickChange = (item) => {
  changeType.value = item.value
}
const segment = () => {
  const parts = allZimi.value
    .match(/"([^"]*)"/g)
    .map((part) => part.slice(1, -1));
  console.log(parts);
};
const zimiText = ref('');
const allZimi = ref(''); // 所有字谜
const twoPng = twoPngIm;
const initVideo = ref([]);
const showVideo = ref([]);
const canvasTest = ref('');
const drawVideo = () => {
  const canvas = canvasTest.value;
  const ctx = canvas.getContext('2d');
  // title 文字样式
  ctx.font = '150px Arial'; // 设置字体大小和类型
  ctx.fillStyle = '#FCDF00'; // 设置填充颜色，即文字颜色
  ctx.strokeStyle = 'black'; // 设置描边颜色
  ctx.lineWidth = 20; // 设置描边宽度
  ctx.textBaseline = 'middle'; // 设置文字基线为中间
  ctx.textAlign = 'center'; // 设置文字对齐方式为居中
  ctx.strokeText('赏你五千万也', canvas.width / 2, canvas.height / 2 - 700);
  ctx.fillText('赏你五千万也', canvas.width / 2, canvas.height / 2 - 700);
  // footer
  ctx.strokeText('猜不出', canvas.width / 2, canvas.height / 2 - 500);
  ctx.fillText('猜不出', canvas.width / 2, canvas.height / 2 - 500);
  ctx.strokeText('猜四个字', canvas.width / 2, canvas.height / 2 + 750);
  ctx.fillText('猜四个字', canvas.width / 2, canvas.height / 2 + 750);
  // 设置文字样式
  ctx.font = '180px Arial'; // 设置字体大小和类型
  ctx.fillStyle = 'white'; // 设置填充颜色，即文字颜色
  ctx.strokeStyle = '#f00'; // 设置描边颜色
  ctx.lineWidth = 20; // 设置描边宽度
  ctx.textBaseline = 'middle'; // 设置文字基线为中间
  ctx.textAlign = 'center'; // 设置文字对齐方式为居中
  console.log(zimiText.value);
  let words = zimiText.value.split(' '); // 使用空格作为分隔符进行分割
  words.forEach((item, index) => {
    if (index === 0) {
      ctx.strokeText(item, canvas.width / 2, canvas.height / 2 - 250); // 填充文字（可选，如果只需要描边可以省略）
      ctx.fillText(item, canvas.width / 2, canvas.height / 2 - 250); // 填充文字（可选，如果只需要描边可以省略）
    } else if (index === 1) {
      ctx.strokeText(item, canvas.width / 2, canvas.height / 2); // 填充文字（可选，如果只需要描边可以省略）
      ctx.fillText(item, canvas.width / 2, canvas.height / 2); // 填充文字（可选，如果只需要描边可以省略）
    } else if (index === 2) {
      ctx.strokeText(item, canvas.width / 2, canvas.height / 2 + 250); // 填充文字（可选，如果只需要描边可以省略）
      ctx.fillText(item, canvas.width / 2, canvas.height / 2 + 250); // 填充文字（可选，如果只需要描边可以省略）
    } else if (index === 3) {
      ctx.strokeText(item, canvas.width / 2, canvas.height / 2 + 500); // 填充文字（可选，如果只需要描边可以省略）
      ctx.fillText(item, canvas.width / 2, canvas.height / 2 + 500); // 填充文字（可选，如果只需要描边可以省略）
    }
  });

  console.log(words);
  // 绘制文字及其描边
  // ctx.strokeText(`Hello word`, canvas.width / 2, canvas.height / 2); // 绘制描边
  // ctx.fillText(`Hello Word`, canvas.width / 2, canvas.height / 2); // 填充文字（可选，如果只需要描边可以省略）
};

// 是否真人出镜
const shadow = '';
// const shadow = 'text-shadow:5px 0 #000, -5px 0 #000, 0 5px #000, 0 -5px #000, 5px 5px #000, -5px -5px #000, 5px -5px #000, -5px 5px #000;';

const peopleType = ref(false);
const oneVideoText = ref([
  { text: '长江长城长白山' },
  { text: '一山一水一世界' },
  { text: '风花雪月红楼梦' },
  { text: '宁做地府孤魂鬼' },
  { text: '红莲白莲潘金莲' },
]);
const TwoVideoText = ref([
  { text: '天有日月同到老' },
  { text: '雨落荷盘滴滴泪' },
  { text: '农民种田能致富' },
  { text: '红塔山下万宝路' },
  { text: '东西南北十字路' },
]);

const initVideoText = () => {
  let oneText = localStorage.getItem('oneVideoText');
  let twoText = localStorage.getItem('twoVideoText');
  if (oneText) {
    oneVideoText.value = JSON.parse(oneText);
  }
  if (twoText) {
    TwoVideoText.value = JSON.parse(twoText);
  }
};
initVideoText();
const handleOneVideo = () => {
  for (const key in showVideo.value) {
    let link = document.createElement('a');
    link.href = showVideo.value[key].newUrl;
    link.download = `${key * 1 + 1}-${Date.now()}.mp4`;
    link.click();
  }
};
const textChange = () => {
  const minLength = Math.min(
    oneVideoText.value.length,
    TwoVideoText.value.length
  );
  for (let i = 0; i < minLength; i++) {
    // 使用临时变量交换
    const temp = oneVideoText.value[i].text;
    oneVideoText.value[i].text = TwoVideoText.value[i].text;
    TwoVideoText.value[i].text = temp;
  }
  handleNumTwo.value = 0;
  handleNum.value = 0;
};
const handleNum = ref(0);
const handleNumTwo = ref(0);
const fileContent = ref('');
const fontSize = ref(70);
const videoWidth = ref(0);
// 抽取视频关键帧
const getVideoImg = async (video, num) => {
  oneVideoList.value.forEach(async (item) => {
    const resp1 = await fetch(item.url);
    const clip = await new MP4Clip(resp1.body!);
    const imgInfo = await clip.thumbnails((clip.width = 720));
    if (imgInfo.length > 0) {
      imgInfo.forEach((item) => {
        let link = document.createElement('a');
        link.href = URL.createObjectURL(item.img);
        link.download = `${new Date().getTime()}.jpg`;
        link.click();
      });
    }
  });
};
const modelOne = async () => {
  const resp1 = await fetch(one);
  const clip = await new MP4Clip(resp1.body!);
  const spr1 = new OffscreenSprite(clip);
  spr1.flip = 'horizontal'; // 镜像处理视频
  const spr2 = new OffscreenSprite(
    new ImgClip(
      await renderTxt2ImgBitmap(
        `没有大学文凭\n很难对出下联`,
        `font-size:70px; color: #ffde00; text-shadow: 2px 2px 6px black;font-weight: bold;width:${videoWidth.value}px;text-align:center;padding-top:25%;${shadow}`
      )
    )
  );
  const spr3 = new OffscreenSprite(
    new ImgClip(
      await renderTxt2ImgBitmap(
        `上联：\n善良有尺`,
        `font-size:70px; color: #ffde00; text-shadow: 2px 2px 6px black;font-weight: bold;width:${videoWidth.value}px;height:1280px;text-align:center;padding-top:70%;${shadow}`
      )
    )
  );
  const spr4 = new OffscreenSprite(
    new ImgClip(
      await renderTxt2ImgBitmap(
        `下联：\n才子佳人请赐教`,
        `font-size:70px; color: #ffde00; text-shadow: 2px 2px 6px black;font-weight: bold;width:${videoWidth.value}px;height:1280px;text-align:center;padding-top:120%;${shadow}`
      )
    )
  );
  const com = new Combinator({
    width: videoWidth.value,
    height: 1280,
  });
  await com.addSprite(spr1, { main: true });
  await com.addSprite(spr2);
  await com.addSprite(spr3);
  await com.addSprite(spr4);
  const srcBlob = await new Response(com?.output() ?? null).blob();
  fileContent.value = URL.createObjectURL(srcBlob);
  console.log(URL.createObjectURL(srcBlob));

  // return com;
};
const oneNum = 3;
const getTopInfo = async (num, videoInfo) => {
  let fontSizeNew = 0;
  let shadowStyle =
    'text-shadow:5px 0 #000, -5px 0 #000, 0 5px #000, 0 -5px #000, 5px 5px #000, -5px -5px #000, 5px -5px #000, -5px 5px #000;';
  if (videoInfo.width < 720) {
    fontSizeNew = 60;
  } else if (videoInfo.width < 1080 && videoInfo.width >= 720) {
    fontSizeNew = 80;
  } else {
    fontSizeNew = 115;
  }
  if (num <= oneNum) {
    return await renderTxt2ImgBitmap(
      `没有大学文凭\n很难对出下联`,
      `font-size:${fontSizeNew}px; color: #ffde00;font-weight: bold;width:${videoInfo.width}px;text-align:center;padding-top:25%;${shadowStyle}`
    );
  } else {
    return await renderTxt2ImgBitmap(
      `胸中若无二两墨\n恐怕很难对出下联`,
      `font-size:${fontSizeNew}px; color: #ffde00;font-weight: bold;width:${videoInfo.width}px;text-align:center;padding-top:25%;${shadowStyle}`
    );
  }
};
const getMiddleInfo = async (num, videoInfo, type, twoText) => {
  let text = twoText;
  let fontSizeNew = 0;
  if (videoInfo.width < 720) {
    fontSizeNew = 60;
  } else if (videoInfo.width < 1080 && videoInfo.width >= 720) {
    fontSizeNew = 80;
  } else {
    fontSizeNew = 115;
  }
  return await renderTxt2ImgBitmap(
    `上联：\n${text}`,
    `font-size:${fontSizeNew}px; color: #ffde00; text-shadow: 2px 2px 6px black;font-weight: bold;width:${videoInfo.width}px;height:${videoInfo.height}px;text-align:center;padding-top:70%;${shadow}`
  );
};
const getBottomInfo = async (num, videoInfo) => {
  let fontSizeNew = 0;
  if (videoInfo.width < 720) {
    fontSizeNew = 60;
  } else if (videoInfo.width < 1080 && videoInfo.width >= 720) {
    fontSizeNew = 80;
  } else {
    fontSizeNew = 115;
  }
  if (num <= oneNum) {
    return await renderTxt2ImgBitmap(
      `下联：\n才子佳人请赐教`,
      `font-size:${fontSizeNew}px; color: #ffde00; text-shadow: 2px 2px 6px black;font-weight: bold;width:${videoInfo.width}px;height:${videoInfo.height}px;text-align:center;padding-top:120%;${shadow}`
    );
  } else {
    return await renderTxt2ImgBitmap(
      `下句：高手来接\n高手快来挑战吧`,
      `font-size:${fontSizeNew}px; color: #ffde00; text-shadow: 2px 2px 6px black;font-weight: bold;width:${videoInfo.width}px;height:${videoInfo.height}px;text-align:center;padding-top:120%;${shadow}`
    );
  }
};

const getBottomInfoTwo = async (num, videoInfo) => {
  let fontSizeNew = 0;
  if (videoInfo.width < 720) {
    fontSizeNew = 60;
  } else if (videoInfo.width < 1080 && videoInfo.width >= 720) {
    fontSizeNew = 80;
  } else {
    fontSizeNew = 115;
  }
  return await renderTxt2ImgBitmap(
    `下句：\n？？？？？？？`,
    `font-size:${fontSizeNew}px; color: #ffde00; text-shadow: 2px 2px 6px black;font-weight: bold;width:${videoInfo.width}px;height:${videoInfo.height}px;text-align:center;padding-top:120%;${shadow}`
  );
};

//  第二套模板
// 红色背景模板
const getRedOneInfo = async (num, videoInfo) => {
  let fontSizeNew = 0;
  let marginLeft = 0;
  let paddingBottom = 8;
  if (videoInfo.width < 720) {
    marginLeft = 12;
    fontSizeNew = 50;
  } else if (videoInfo.width < 1080 && videoInfo.width >= 720) {
    fontSizeNew = 60;
    marginLeft = 20;
  } else {
    paddingBottom = 11;
    marginLeft = 11;
    fontSizeNew = 115;
  }
  return await renderTxt2ImgBitmap(
    `没有大学文凭\n`,
    `font-size:${fontSizeNew}px; color: white; text-shadow: 2px 2px 6px black;font-weight: bold;text-align:center;background:red;border-radius:10px;padding-top:15px;margin-top:20%;;padding-bottom:${paddingBottom}%;padding-left:9%;margin-left:${marginLeft}%;padding-right:8%`
  );
};
const getRedTwoInfo = async (num, videoInfo) => {
  let fontSizeNew = 0;
  let marginLeft = 0;
  let paddingBottom = 0;
  let paddingRight = 6;
  let paddingLeft = 8;
  if (videoInfo.width < 720) {
    marginLeft = 6;
    paddingBottom = 15;
    fontSizeNew = 50;
  } else if (videoInfo.width < 1080 && videoInfo.width >= 720) {
    marginLeft = 10;
    paddingBottom = 17;
    fontSizeNew = 60;
  } else {
    marginLeft = 3;
    fontSizeNew = 110;
    paddingBottom = 24;
    paddingRight = 4;
    paddingLeft = 6;
  }
  return await renderTxt2ImgBitmap(
    `你是对不出此联的`,
    `font-size:${fontSizeNew}px; color: white; text-shadow: 2px 2px 6px black;font-weight: bold;text-align:center;background:red;border-radius:10px;padding-top:15px;margin-top:40%;;padding-bottom:${paddingBottom}%;padding-left:${paddingLeft}%;margin-left:${marginLeft}%;padding-right:${paddingRight}%`
  );
};

const getRedThreeInfo = async (num, videoInfo) => {
  let fontSizeNew = 0;
  let marginLeft = 0;
  let paddingBottom = 0;
  let marginTop = 0;
  let paddingRight = 0;
  if (videoInfo.width < 720) {
    marginLeft = 51;
    paddingBottom = 22;
    fontSizeNew = 50;
    marginTop = 100;
    paddingRight = 5;
  } else if (videoInfo.width < 1080 && videoInfo.width >= 720) {
    marginLeft = 58;
    paddingBottom = 25;
    fontSizeNew = 60;
    marginTop = 95;
    paddingRight = 8;
  } else {
    marginTop = 100;
    marginLeft = 50;
    paddingBottom = 40;
    paddingRight = 11;
    fontSizeNew = 115;
  }
  return await renderTxt2ImgBitmap(
    `上联：`,
    `font-size:${fontSizeNew}px; color: white; text-shadow: 2px 2px 6px black;font-weight: bold;text-align:center;background:red;border-radius:10px;padding-top:15px;margin-top:${marginTop}%;;padding-bottom:${paddingBottom}%;padding-left:8%;margin-left:${marginLeft}%;padding-right:${paddingRight}%`
  );
};
const twoGetTextNum = ref(1);
const getRedFourInfo = async (num, videoInfo, text) => {
  // alert(num)
  // let text = TwoVideoText.value[num - 1].text;
  let fontSizeNew = 50;
  let marginLeft = 0;
  let paddingBottom = 0;
  let marginTop = 0;
  let paddingRight = 0;
  if (videoInfo.width < 720) {
    fontSizeNew = 50;
    marginLeft = 30;
    paddingBottom = 30;
    marginTop = 100;
    paddingRight = 5;
    if (text.length === 7) {
      marginLeft = 13;
      marginTop = 90;
    } else if (text.length === 4) {
      marginLeft = 35;
      marginTop = 120;
      paddingBottom = 30;
    } else if (text.length === 5) {
      marginLeft = 28;
      paddingBottom = 28;
      marginTop = 105;
    } else if (text.length === 6) {
      marginLeft = 28;
      paddingBottom = 28;
      marginTop = 105;
    }
  } else if (videoInfo.width < 1080 && videoInfo.width >= 720) {
    fontSizeNew = 60;
    marginTop = 105;
    if (text.length === 5) {
      marginLeft = 31;
      paddingBottom = 35;
    } else if (text.length === 4) {
      marginTop = 118;
      marginLeft = 38;
      paddingBottom = 35;
    } else if (text.length === 7) {
      marginTop = 88;
      marginLeft = 15;
      paddingBottom = 35;
    } else if (text.length === 6) {
      marginTop = 88;
      marginLeft = 15;
      paddingBottom = 33;
    }
    paddingRight = 8;
  } else {
    if (text.length === 5) {
      marginTop = 115;
      marginLeft = 23;
      paddingBottom = 53;
      paddingRight = 7;
    } else if (text.length === 4) {
      marginTop = 130;
      marginLeft = 30;
      paddingBottom = 54;
      paddingRight = 9;
    } else if (text.length === 7) {
      marginTop = 90;
      marginLeft = 5;
      paddingBottom = 52;
      paddingRight = 5;
    } else if (text.length === 6) {
      marginTop = 100;
      marginLeft = 10;
      paddingBottom = 52;
      paddingRight = 5;
    }
    fontSizeNew = 115;
  }
  return await renderTxt2ImgBitmap(
    `${text}`,
    `font-size:${fontSizeNew}px; color: white; text-shadow: 2px 2px 6px black;font-weight: bold;text-align:center;background:red;border-radius:10px;padding-top:15px;margin-top:${marginTop}%;;padding-bottom:${paddingBottom}%;padding-left:8%;margin-left:${marginLeft}%;padding-right:${paddingRight}%`
  );
};

const getRedFiveInfo = async (num, videoInfo) => {
  let fontSizeNew = 50;
  let marginLeft;
  let paddingBottom = 0;
  let marginTop = 0;
  let paddingRight = 0;
  if (videoInfo.width < 720) {
    fontSizeNew = 50;
    paddingRight = 5;
    marginLeft = 35;
    marginTop = 150;
    paddingBottom = 37;
  } else if (videoInfo.width < 1080 && videoInfo.width >= 720) {
    fontSizeNew = 60;
    marginTop = 150;
    marginLeft = 38;
    paddingBottom = 45;
    paddingRight = 8;
  } else {
    marginTop = 145;
    marginLeft = 35;
    paddingBottom = 68;
    paddingRight = 12;
    fontSizeNew = 115;
  }
  return await renderTxt2ImgBitmap(
    `恭请赐教`,
    `font-size:${fontSizeNew}px; color: white; text-shadow: 2px 2px 6px black;font-weight: bold;text-align:center;background:red;border-radius:10px;padding-top:15px;margin-top:${marginTop}%;;padding-bottom:${paddingBottom}%;padding-left:8%;margin-left:${marginLeft}%;padding-right:${paddingRight}%`
  );
};
const horizontalType = ref(true);
const penpleHandleNewVideo = async (videoInfo, type, text) => {
  const resp1 = await fetch(videoInfo.url);
  const clip = await new MP4Clip(resp1.body!);
  const spr1 = new OffscreenSprite(clip);
  if (horizontalType.value) {
    spr1.flip = 'horizontal'; // 镜像处理视频
  }
  let spr2 = null;
  let spr3 = null;
  let spr4 = null;
  spr2 = new OffscreenSprite(
    new ImgClip(await getTopInfo(handleNum.value, videoInfo))
  );
  spr3 = new OffscreenSprite(
    new ImgClip(await getMiddleInfo(handleNum.value, videoInfo, 'one', text))
  );
  spr4 = new OffscreenSprite(
    new ImgClip(await getBottomInfo(handleNum.value, videoInfo))
  );
  const com = new Combinator({
    width: videoInfo.width,
    height: videoInfo.height,
  });
  await com.addSprite(spr1, { main: true });
  await com.addSprite(spr2);
  await com.addSprite(spr3);
  await com.addSprite(spr4);
  const srcBlob = await new Response(com?.output() ?? null).blob();
  videoInfo.newUrl = URL.createObjectURL(srcBlob);
  saveCount();
  showVideo.value.push(videoInfo);
};
const saveCount = () => {
  // 获取当天日期作为存储的key
  const today = new Date().toISOString().split('T')[0];
  const storageKey = `videoAddCount_${today}`;
  // 从localStorage获取当天的添加次数，如果没有则初始化为0
  let addCount = parseInt(localStorage.getItem(storageKey)) || 0;
  // 更新添加次数
  addCount++;
  localStorage.setItem(storageKey, addCount.toString());
};
const getPeopleTopInfo = async (num, videoInfo) => {
  let fontSizeNew = 115;
  return await renderTxt2ImgBitmap(
    `这个对联你要是\n能对上\n我绝对佩服您`,
    `font-size:${fontSizeNew}px; color: #ffde00; text-shadow: 2px 2px 6px black;font-weight: bold;width:${videoInfo.width}px;text-align:center;padding-top:25%`
  );
};
const handleNewVideo = async (videoInfo, type) => {
  const resp1 = await fetch(videoInfo.url);
  const clip = await new MP4Clip(resp1.body!);
  const spr1 = new OffscreenSprite(clip);
  if (horizontalType.value) {
    spr1.flip = 'horizontal'; // 镜像处理视频
  }
  let spr2 = null;
  let spr3 = null;
  let spr4 = null;
  let spr5 = null;
  let spr6 = null;
  if (type === 'two') {
    handleNumTwo.value += 1;
    let text = TwoVideoText.value[handleNumTwo.value - 1].text;
    if (handleNumTwo.value <= 3) {
      // 红色背景模板
      spr2 = new OffscreenSprite(
        new ImgClip(await getRedOneInfo(handleNumTwo.value, videoInfo))
      );
      spr3 = new OffscreenSprite(
        new ImgClip(await getRedTwoInfo(handleNumTwo.value, videoInfo))
      );
      spr4 = new OffscreenSprite(
        new ImgClip(await getRedThreeInfo(handleNumTwo.value, videoInfo))
      );
      spr5 = new OffscreenSprite(
        new ImgClip(await getRedFourInfo(handleNumTwo.value, videoInfo, text))
      );
      spr6 = new OffscreenSprite(
        new ImgClip(await getRedFiveInfo(handleNumTwo.value, videoInfo))
      );
    } else {
      spr2 = new OffscreenSprite(
        new ImgClip(await getTopInfo(handleNumTwo.value, videoInfo))
      );
      spr3 = new OffscreenSprite(
        new ImgClip(
          await getMiddleInfo(handleNumTwo.value, videoInfo, type, text)
        )
      );
      spr4 = new OffscreenSprite(
        new ImgClip(await getBottomInfoTwo(handleNumTwo.value, videoInfo))
      );
    }
  } else {
    handleNum.value += 1;
    let text = oneVideoText.value[handleNum.value - 1].text;
    spr2 = new OffscreenSprite(
      new ImgClip(await getTopInfo(handleNum.value, videoInfo))
    );
    spr3 = new OffscreenSprite(
      new ImgClip(await getMiddleInfo(handleNum.value, videoInfo, 'one', text))
    );
    spr4 = new OffscreenSprite(
      new ImgClip(await getBottomInfo(handleNum.value, videoInfo))
    );
  }

  const com = new Combinator({
    width: videoInfo.width,
    height: videoInfo.height,
  });
  await com.addSprite(spr1, { main: true });
  await com.addSprite(spr2);
  if (spr3) {
    await com.addSprite(spr3);
  }
  if (spr4) {
    await com.addSprite(spr4);
  }
  if (spr5) {
    await com.addSprite(spr5);
  }
  if (spr6) {
    await com.addSprite(spr6);
  }
  const srcBlob = await new Response(com?.output() ?? null).blob();
  videoInfo.newUrl = URL.createObjectURL(srcBlob);
  saveCount();
  showVideo.value.push(videoInfo);
};
const handleVideo = async () => {
  const resp1 = await fetch(one);
  new MP4Clip(resp1.body!).ready.then((info) => {
    videoWidth.value = info.width;
    modelOne();
  });
};
const saveVideo = () => {};
const oneVideoList = ref([]);
const handleNewZimiVideo = async (videoInfo, type) => {
  const resp1 = await fetch(videoInfo.url);
  const clip = await new MP4Clip(resp1.body!);
  const spr1 = new OffscreenSprite(clip);
  let spr2 = null;
  spr2 = new OffscreenSprite(new ImgClip((await fetch(twoPng)).body));
  const com = new Combinator({
    width: videoInfo.width,
    height: videoInfo.height,
  });
  await com.addSprite(spr1, { main: true });
  await com.addSprite(spr2);
  const srcBlob = await new Response(com?.output() ?? null).blob();
  console.log(srcBlob);
  videoInfo.newUrl = URL.createObjectURL(srcBlob);
  saveCount();
  showVideo.value.push(videoInfo);
};
const zimiChange = () => {
  oneVideoList.value.forEach((item) => {
    handleNewZimiVideo(item, 'one');
  });
};
const oneHandleVideo = () => {
  if (!videoCount()) {
    return false;
  }
  if (oneVideoList.value.length === 0) {
    alert('请上传视频');
    return;
  }
  localStorage.setItem('oneVideoText', JSON.stringify(oneVideoText.value));
  if (peopleType.value) {
    for (const key in oneVideoList.value) {
      penpleHandleNewVideo(
        oneVideoList.value[key],
        'one',
        oneVideoText.value[key].text
      );
    }
  } else {
    oneVideoList.value.forEach((item) => {
      handleNewVideo(item, 'one');
    });
  }
};
const handleFileChange = (event: any) => {
  oneVideoList.value = [];
  const files = Array.from(event.target.files);
  files.forEach(async (file: any) => {
    let pushData = { width: 0, height: 0, url: '', newUrl: '' };
    if (file && file.type.startsWith('video/')) {
      // 确保文件是视频类型
      const resp1 = await fetch(URL.createObjectURL(file));
      new MP4Clip(resp1.body!).ready.then(async (info) => {
        console.log(info);

        pushData.url = URL.createObjectURL(file); // 创建可访问的URL
        pushData.width = info.width;
        pushData.height = info.height;
        oneVideoList.value.push(pushData);
        // handleNewVideo(pushData);
      });
    }
  });
};
const twoVideoList = ref([]);
const videoCount = () => {
  // 获取当天日期作为存储的key
  const today = new Date().toISOString().split('T')[0];
  const storageKey = `videoAddCount_${today}`;

  // 从localStorage获取当天的添加次数，如果没有则初始化为0
  let addCount = parseInt(localStorage.getItem(storageKey)) || 0;

  // 检查是否超过限制
  //if (addCount > 50) {
  //  alert('今天已经添加了50次视频，请明天再试');
  //  return false;
  //}
  return true;
};
const twoHandleVideo = () => {
  if (!videoCount()) {
    return false;
  }
  if (twoVideoList.value.length === 0) {
    alert('请上传视频');
    return;
  }
  localStorage.setItem('twoVideoText', JSON.stringify(TwoVideoText.value));
  if (peopleType.value) {
    for (const key in twoVideoList.value) {
      penpleHandleNewVideo(
        twoVideoList.value[key],
        'one',
        TwoVideoText.value[key].text
      );
    }
  } else {
    twoVideoList.value.forEach((item) => {
      handleNewVideo(item, 'two');
    });
  }
};
const handleFileChangeTwo = (event: any) => {
  twoVideoList.value = [];
  const files = Array.from(event.target.files);
  files.forEach(async (file: any) => {
    let pushData = { width: 0, height: 0, url: '', newUrl: '' };
    if (file && file.type.startsWith('video/')) {
      // 确保文件是视频类型
      const resp1 = await fetch(URL.createObjectURL(file));
      new MP4Clip(resp1.body!).ready.then(async (info) => {
        pushData.url = URL.createObjectURL(file); // 创建可访问的URL
        pushData.width = info.width;
        pushData.height = info.height;
        twoVideoList.value.push(pushData);
        // handleNewVideo(pushData, 'two');
      });
    }
  });
};
</script>

<style lang="scss" scoped>
</style>